    /* * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
    } */

    /* html {
        font-family: "微软雅黑";
        font-size: 14px;
    } */

    .new {
        position: relative;
        z-index: 0;
    }

    /* 顶端选项卡开始 */
    .container {
        width: 100%;
        position: relative;
        margin: 0 auto;
    }

    .container ul {
        width: 100%;
        position: relative;
        margin: 0 auto;
        align-items: center;
        justify-content: space-around;
        overflow: hidden;
        /* display: table; */
        /*定义li自适应ul的宽度*/
        /* display: flex;
        display: -webkit-flex; */
    }

    .container ul li {
        text-align: center;
        margin: 0 6px 0px 6px;
        letter-spacing: 1px;
        display: block;
        color: #979797;
        padding: 0px 20px;
        line-height: 29px;
        text-align: center;
        float: left;
        border: 1px solid #d0d0d0;
        border-radius: 45px;
        cursor: pointer;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-top: 5px;
        /*定义li自适应ul的宽度*/
        /* flex: 1; */
        /* width:100%; */
        /* display: table-cell; */
    }

    /* 顶端选项卡结束 */


    /* 课程体系开始 */
    .preview-course {
        width: 100%;
        position: relative;
        top: 80px;
        margin: 0 auto;
        margin-bottom: 200px;
    }

    /* 这是每个学期的样式 */
    .preview-course .semester-ul {
        width: 100%;
        /* display: table; */
    }

    .preview-course .semester-li {
        width: 100%;
        position: relative;
        /* height: 500px; */
        /* background: yellowgreen; */
    }

    .preview-course .semester-span {
        /* width: 181px;
        height: 41px; */
        /* position: relative; */
        display: flex;
        color: #1b68b4;
        /* cursor: pointer; */
    }

    .preview-course .semester-span .semester-span-p {
        height: 40px;
        line-height: 40px;
        padding: 0px 33px;
        position: relative;
        border: 1px solid #d2d2d2;
        border-radius: 45px;
        margin: 0 auto;
        justify-content: center
    }

    .preview-course .semester-span img {
        top: 11px;
        float: left;
        position: relative;
    }

    .preview-course .semester-span span {
        font-size: 18px;
        letter-spacing: 3px;
        color: #385899;
        margin-left: 10px;
        float: left;
        font-weight: bold;
        position: relative;
        text-align: center;
    }

    /* 这是课程的样式 */
    .preview-course .curriculum-ul {
        width: 50%;
        margin: 0 auto;
        position: relative;
    }

    .preview-course .curriculum-li {
        border: 1px solid rgb(185, 185, 185);
        border-radius: 45px;
        position: relative;
    }

    .preview-course .curriculum-span {
        height: 20px;
        /* color: rgb(70, 67, 67); */
        line-height: 20px;
        text-align: center;
        cursor: pointer;
        border-radius: 45px;
        padding: 5px 21px;
        position: relative;
        /* background: white; */
        z-index: 1;

    }

    .preview-course .curriculum-li .curriculum-span img {
        float: left;
        position: relative;
        top: 1.5px;
        left: 3px;
    }

    .preview-course .curriculum-li .curriculum-span p {
        font-weight: bold;
        margin-left: 10px;
        float: left;
        color: rgb(103, 103, 103);
        position: relative;
        top: 3px;
    }

    /* 通过计算index值来设置课程的左右样式 */
    .listleft {
        margin-top: 15px;
        float: right;
        left: -308px;
        clear: both;
        /* background: #1b68b4; */
        background-color: white;
        position: relative;
    }

    .listright {
        /* margin-top: 100px;
        left: 117px;
        float: left;
        background: yellow;
        position: relative; */
        margin-top: 60px;
        left: 307px;
        float: left;
        background: white;
        position: relative;
    }

    /* 绘制竖直线 */
    .X-axis {
        width: 1px;
        /* height: 456px; */
        border-left: 1px dotted grey;
        display: block;
        position: relative;
        margin: 0 auto;
    }

    /* 绘制横直线 */
    .Y-axis {
        width: 24px;
        height: 1px;
        border-top: 1px dotted grey;
        display: block;
        position: relative;
        margin: 0 auto;
        /* 
        left: -91px;
        bottom: 14px;
        float: right; 
        */
    }

    /* 为横直线做左侧定位 */
    .listleft .Y-axis {
        position: absolute;
        right: -27px;
        top: 14px;
    }

    /* 为横直线做右侧定位 */
    .listright .Y-axis {
        position: absolute;
        left: -27px;
        top: 14px;
    }

    /* 用来确定左侧and右侧第一个课程对上部的top */
    .curriculum-ul>li:nth-child(1) {
        margin-top: 30px;
    }

    .curriculum-ul>li:nth-child(2) {
        margin-top: 15px;
    }


    /* 开始绘制点击课程之后出现的课程明细 */
    /* 三维数组，开始课程明细 */
    .listleft .clickhander {
        position: absolute;
        overflow: inherit;
    }

    .listright .clickhander {
        position: absolute;
        left: 250px;

    }
    
    /* 开始绘制点击课程之后出现的课程明细 */
    /* 绘制第一步横直线 */
    .Y-axisclick {
        width: 200px;
        height: 1px;
        border-top: 1px dotted grey;
        display: block;
        position: relative;
        margin: 0 auto;
        z-index: -1;
    }

    /* 为横直线做左侧定位 */
    .listleft .Y-axisclick {
        position: relative;
        right: 137px;
        top: -15px;
        z-index: -1;
        opacity: 0;
        animation: Y-leftAxisclick 0.7s 0s linear forwards;
        -moz-animation: Y-leftAxisclick 0.7s 0s linear forwards;
        /* Firefox */
        -webkit-animation: Y-leftAxisclick 0.7s 0s linear forwards;
        /* Safari and Chrome */
        -o-animation: Y-leftAxisclick 0.7s 0s linear forwards;
        /* Opera */
    }

    /* 制作足额侧横直线从0px到250px的动画 */
    @keyframes Y-leftAxisclick {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-moz-keyframes Y-leftAxisclick

    /* Firefox */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-webkit-keyframes Y-leftAxisclick

    /* Safari and Chrome */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-o-keyframes Y-leftAxisclick

    /* Opera */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* 为横直线做右侧定位 */
    .listright .Y-axisclick {
        position: relative;
        top: -17px;
        z-index: -1;
        opacity: 0;
        left: -150px;
        animation: Y-rightAxisclick 0.7s 0s linear forwards;
        -moz-animation: Y-rightAxisclick 0.7s 0s linear forwards;
        /* Firefox */
        -webkit-animation: Y-rightAxisclick 0.7s 0s linear forwards;
        /* Safari and Chrome */
        -o-animation: Y-rightAxisclick 0.7s 0s linear forwards;
        /* Opera */
    }

    /* 制作右侧横直线的动画 */
    @keyframes Y-rightAxisclick {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-moz-keyframes Y-rightAxisclick

    /* Firefox */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-webkit-keyframes Y-rightAxisclick

    /* Safari and Chrome */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-o-keyframes Y-rightAxisclick

    /* Opera */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* 制作横直线从0px到250px的动画结束 */


    /* 写出竖直线 */
    .X-axisclick {
        width: 1px;
        /* height: 456px; */
        border-left: 1px dotted grey;
        display: block;
        position: relative;
        margin: 0 auto;
    }

    /* 为竖直线做左侧定位 */
    .listleft .X-axisclick {
        position: absolute;
        right: 337px;
        top: -31px;
        opacity: 0;
        animation: X-leftAxisclick 0.7s 0s linear 1 forwards;
        -moz-animation: X-leftAxisclick 0.7s 0s linear 1 forwards;
        /* Firefox */
        -webkit-animation: X-leftAxisclick 0.7s 0s linear 1 forwards;
        /* Safari and Chrome */
        -o-animation: X-leftAxisclick 0.7s 0s linear 1 forwards;
    }

    /* 制作左侧竖线的长度，动画分别为位置的移动和透明度的从无到有 */
    @keyframes X-leftAxisclick {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-moz-keyframes X-leftAxisclick

    /* Firefox */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-webkit-keyframes X-leftAxisclick

    /* Safari and Chrome */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-o-keyframes X-leftAxisclick

    /* Opera */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* 为竖直线做右侧定位 */
    .listright .X-axisclick {
        position: absolute;
        left: 50px;
        top: -32px;
        opacity: 0;
        animation: X-rightAxisclick 0.7s 0s linear 1 forwards;
        -moz-animation: X-rightAxisclick 0.7s 0s linear 1 forwards;
        /* Firefox */
        -webkit-animation: X-rightAxisclick 0.7s 0s linear 1 forwards;
        /* Safari and Chrome */
        -o-animation: X-rightAxisclick 0.7s 0s linear 1 forwards;
    }

    /* 制作右侧竖线的长度，动画分别为位置的移动和透明度的从无到有 */
    @keyframes X-rightAxisclick {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-moz-keyframes X-rightAxisclick

    /* Firefox */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-webkit-keyframes X-rightAxisclick

    /* Safari and Chrome */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-o-keyframes X-rightAxisclick

    /* Opera */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* 和数据P一起的指引左侧横直线 */
    .listleft p .Y-axis-clicktow {
        width: 25px;
        height: 1px;
        border-bottom: 1px dotted grey;
        display: block;
        position: relative;
        right: -180px;
        /* margin: 0 auto; */
        /* left: 310px; */
        /* z-index: -1; */
        bottom: -12px;
        /* margin-bottom: 31px; */
        /* float: left; */
        animation: YleftAxisClicktow 0.7s 0s linear 1 forwards;
        -moz-animation: YleftAxisClicktow 0.7s 0s linear 1 forwards;
        /* Firefox */
        -webkit-animation: YleftAxisClicktow 0.7s 0s linear 1 forwards;
        /* Safari and Chrome */
        -o-animation: YleftAxisClicktow 0.7s 0s linear 1 forwards;
        opacity: 0;
    }

    /* 制作左侧每条数据对应的横线的通名都变换动画和宽度 */
    @keyframes YleftAxisClicktow {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-moz-keyframes YleftAxisClicktow

    /* Firefox */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-webkit-keyframes YleftAxisClicktow

    /* Safari and Chrome */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-o-keyframes YleftAxisClicktow

    /* Opera */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* 和数据P一起的指引右侧横直线 */
    .listright p .Y-axis-clicktow {
        width: 25px;
        height: 1px;
        border-bottom: 1px dotted grey;
        display: block;
        position: relative;
        right: 25px;
        /* margin: 0 auto; */
        /* z-index: -1; */
        bottom: -12px;
        /* margin-bottom: 40px; */
        animation: YrightAxisClicktow 0.7s 0s linear 1 forwards;
        -moz-animation: YrightAxisClicktow 0.7s 0s linear 1 forwards;
        /* Firefox */
        -webkit-animation: YrightAxisClicktow 0.7s 0s linear 1 forwards;
        /* Safari and Chrome */
        -o-animation: YrightAxisClicktow 0.7s 0s linear 1 forwards;
        opacity: 0;
    }

    /* 制作右侧每条数据对应的横线的通名都变换动画和宽度 */
    @keyframes YrightAxisClicktow {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-moz-keyframes YrightAxisClicktow

    /* Firefox */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-webkit-keyframes YrightAxisClicktow

    /* Safari and Chrome */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-o-keyframes YrightAxisClicktow

    /* Opera */
        {
        from {
            opacity: 0;
        }

        to {
            
            opacity: 1;
        }
    }

    .listleft .detailedAxisTitle {
        width: 250px;
        height: 22px;
        position: relative;
        margin-bottom: 10px;
        right: 72px;
        text-align: right;
    }

    .listright .detailedAxisTitle {
        width: 250px;
        height: 22px;
        position: relative;
        margin-bottom: 10px;
        right: 20px;
        text-align: left;
    }

    .listleft .clickhander .clickhander-ul {
        position: relative;
        left: -303px;
        top: -58px;
        /* margin-top: 16px; */
        /* visibility: visible; */
    }

    .listright .clickhander .clickhander-ul {
        position: relative;
        left: 155px;
        top: -45px;
        /* margin-top: 16px; */
    }

    .listleft .clickhander .clickhander-ul .detailedTitle {
        height: 20px;
        line-height: 20px;
        float: right;
        border: 1px solid #e1e1e1;
        border-radius: 45px;
        padding: 1px 12px;
        position: relative;
        left: -71px;
        cursor: pointer;
        color: rgb(103, 103, 103);
        animation: leftleftdetailedTitle 0.7s 0s linear 1 forwards;
        -moz-animation: leftleftdetailedTitle 0.7s 0s linear 1 forwards;
        /* Firefox */
        -webkit-animation: leftdetailedTitle 0.7s 0s linear 1 forwards;
        /* Safari and Chrome */
        -o-animation: leftdetailedTitle 0.7s 0s linear 1 forwards;
        /* overflow: hidden; */
        opacity: 0;
        z-index: 1;
    }

    .listleft .clickhander .clickhander-ul .detailedTitle:hover {
        background-color: #f2f2f2;
    }

    /* 对左侧从后台传过来的数据，制作一个从0透明度到1的动画 */
    @keyframes leftdetailedTitle {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-moz-keyframes leftdetailedTitle {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-webkit-keyframes leftdetailedTitle {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-o-keyframes leftdetailedTitle {

        /* Opera */
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .listright .clickhander .clickhander-ul .detailedTitle {
        height: 20px;
        line-height: 20px;
        border: 1px solid #e1e1e1;
        border-radius: 45px;
        padding: 1px 12px;
        position: relative;
        cursor: pointer;
        color: rgb(103, 103, 103);
        float: left;
        left: 0px;
        animation: trightdetailedTitle 0.1s 0.2s linear 1 forwards;
        -moz-animation: trightdetailedTitle 0.1s 0.2s linear 1 forwards;
        /* Firefox */
        -webkit-animation: trightdetailedTitle 0.1s 0.2s linear 1 forwards;
        /* Safari and Chrome */
        -o-animation: trightdetailedTitle 0.1s 0.2s linear 1 forwards;
        /* overflow: hidden; */
        opacity: 0;
        z-index: 1;
    }

    .listright .clickhander .clickhander-ul .detailedTitle:hover {
        background-color: #f2f2f2;
    }

    /* 对右侧从后台传过来的数据，制作一个从0透明度到1的动画 */
    @keyframes trightdetailedTitle {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-moz-keyframes trightdetailedTitle {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-webkit-keyframes trightdetailedTitle {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-o-keyframes trightdetailedTitle {

        /* Opera */
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* 实验课程图表显示 */
    .listright .Detailed-course-data .detailedAxisTitle img {
        /* position: absolute; */
        margin-left: 4px;
        float: right;
        left: 30px;
        margin: 4px 0 0 4px;
    }

    .listleft .Detailed-course-data .detailedAxisTitle img {
        /* position: absolute; */
        text-align: right;
        top: 2px;
        margin: -1px 4px 0 0;
    }

    /* 用来确定左侧and右侧第一个课程对上部的top */
    /* .clickhander-ul>li:nth-child(1) {
        margin-top: -115px;
    } */


    /* 四维数组，开始明细 */
    .Detailed-course-data {
        cursor: pointer;
        width: 200px;
    }

    .listleft .Detailed-course-data {
        position: relative;
        left: 30px;
        top: 12px;
    }

    .listright .Detailed-course-data {
        position: relative;
        left: -58px;
        top: -2px;
    }

    .listleft .Detailed-course-data .lowestLevel {
        position: relative;
        right: 177px;
        margin-bottom: 10px;
    }

    .listright .Detailed-course-data .lowestLevel {
        position: relative;
        left: 77px;
        margin-bottom: 10px;
    }

    .listleft .Detailed-course-data .lowestLevel .X-axistowclick {
        width: 1px;
        height: 1px;
        display: block;
        /* height: 456px; */
        border-right: 1px dotted grey;
        position: relative;
        float: right;
        left: 69px;
        top: -5px;
        /* top: -5px; */
        opacity: 0;
        animation: X-leftAxisclickend 0.7s 0s 1 forwards;
        -moz-animation: X-leftAxisclickend 0.7s 0s 1 forwards;
        /* Firefox */
        -webkit-animation: X-leftAxisclickend 0.7s 0s 1 forwards;
        /* Safari and Chrome */
        -o-animation: X-leftAxisclickend 0.7s 0s 1 forwards;
    }

    /* 制作左侧竖线的长度，动画分别为位置的移动和透明度的从无到有 */
    @keyframes X-leftAxisclickend {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-moz-keyframes X-leftAxisclickend

    /* Firefox */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-webkit-keyframes X-leftAxisclickend

    /* Safari and Chrome */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-o-keyframes X-leftAxisclickend

    /* Opera */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .listright .Detailed-course-data .lowestLevel .X-axistowclick {
        width: 1px;
        height: 1px;
        display: block;
        /* height: 456px; */
        border-left: 1px dotted grey;
        position: relative;
        float: left;
        right: 80px;
        opacity: 0;
        top: -5px;
        animation: X-rightAxisclickend 0.7s 0s 1 forwards;
        -moz-animation: X-rightAxisclickend 0.7s 0s 1 forwards;
        /* Firefox */
        -webkit-animation: X-rightAxisclickend 0.7s 0s 1 forwards;
        /* Safari and Chrome */
        -o-animation: X-rightAxisclickend 0.7s 0s 1 forwards;
    }

    /* 制作右侧竖线的长度，动画分别为位置的移动和透明度的从无到有 */
    @keyframes X-rightAxisclickend {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-moz-keyframes X-rightAxisclickend

    /* Firefox */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-webkit-keyframes X-rightAxisclickend

    /* Safari and Chrome */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-o-keyframes X-rightAxisclickend

    /* Opera */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .listleft .Detailed-course-data .lowestLevel .lowestLevelAxisTitle {
        width: 200px;
        height: 22px;
        position: relative;
        text-align: right;
        left: 62px;
        top: 2px;
        pointer-events: none;
    }

    .listright .Detailed-course-data .lowestLevel .lowestLevelAxisTitle {
        width: 200px;
        height: 22px;
        position: relative;
        right: 69px;
        top: 1px;
        pointer-events: none;
    }

    .listleft .Detailed-course-data .lowestLevel p .Y-axistowclick {
        /* width: 20px; */
        display: block;
        border-top: 1px dotted gray;
        position: relative;
        float: right;
        top: 10px;
        left: 7px;
        opacity: 0;
        width: 25px;
        animation: leftlowestLevelTitle 0.7s 0s 1 forwards;
        -moz-animation: leftlowestLevelTitle 0.7s 0s 1 forwards;
        /* Firefox */
        -webkit-animation: leftlowestLevelTitle 0.7s 0.1s 1 forwards;
        /* Safari and Chrome */
        -o-animation: leftlowestLevelTitle 0.7s 0s 1 forwards;
    }

    /* 制作左侧每条数据对应的横线的通名都变换动画和宽度 */
    @keyframes YleftAxisClickthree {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-moz-keyframes YleftAxisClickthree

    /* Firefox */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-webkit-keyframes YleftAxisClickthree

    /* Safari and Chrome */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-o-keyframes YleftAxisClickthree

    /* Opera */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .listright .Detailed-course-data .lowestLevel p .Y-axistowclick {
        display: block;
        border-top: 1px dotted gray;
        position: relative;
        float: left;
        right: 11px;
        top: 11px;
        opacity: 0;
        width: 25px;
        animation: leftlowestLevelTitle 0.7s 0s 1 forwards;
        -moz-animation: leftlowestLevelTitle 0.7s 0s 1 forwards;
        /* Firefox */
        -webkit-animation: leftlowestLevelTitle 0.7s 0.1s 1 forwards;
        /* Safari and Chrome */
        -o-animation: leftlowestLevelTitle 0.7s 0s 1 forwards;
    }

    /* 制作右侧每条数据对应的横线的通名都变换动画和宽度 */
    @keyframes YrightAxisClickthree {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-moz-keyframes YrightAxisClickthree

    /* Firefox */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-webkit-keyframes YrightAxisClickthree

    /* Safari and Chrome */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-o-keyframes YrightAxisClickthree

    /* Opera */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .listleft .Detailed-course-data .lowestLevel p .lowestLevelTitle {
        color: rgb(103, 103, 103);
        width: 250px;
        opacity: 0;
        animation: leftlowestLevelTitle 0.7s 0s 1 forwards;
        -moz-animation: leftlowestLevelTitle 0.7s 0s 1 forwards;
        /* Firefox */
        -webkit-animation: leftlowestLevelTitle 0.7s 0.1s 1 forwards;
        /* Safari and Chrome */
        -o-animation: leftlowestLevelTitle 0.7s 0s 1 forwards;
    }

    /* 对左侧从后台传过来的数据，制作一个从0透明度到1的动画 */
    @keyframes leftlowestLevelTitle {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-moz-keyframes leftlowestLevelTitle {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-webkit-keyframes leftlowestLevelTitle {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-o-keyframes leftlowestLevelTitle

    /* Opera */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .listright .Detailed-course-data .lowestLevel p .lowestLevelTitle {
        
        width: 250px;
        color: rgb(103, 103, 103);
        position: relative;
        top: 4px;
        left: -5px;
        opacity: 0;
        animation: leftlowestLevelTitle 0.7s 0s 1 forwards;
        -moz-animation: leftlowestLevelTitle 0.7s 0s 1 forwards;
        /* Firefox */
        -webkit-animation: leftlowestLevelTitle 0.7s 0.1s 1 forwards;
        /* Safari and Chrome */
        -o-animation: leftlowestLevelTitle 0.7s 0s 1 forwards;
    }

    /* 对右侧从后台传过来的数据，制作一个从0透明度到1的动画 */
    @keyframes lowestLevelTitle {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-moz-keyframes lowestLevelTitle {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-webkit-keyframes lowestLevelTitle {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-o-keyframes lowestLevelTitle

    /* Opera */
        {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* 课程体系结束 */
    .taoyongjiejue {
        width: 200px;
    }